<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例讲解--全选与全不选</title>
    <style>
        div{
            width:150px;
            border:solid 1px #aaa;
            margin:0 auto;
            padding:5px 15px;
            box-sizing:border-box;
            border-radius:8px;
        }
        a{
            color:green;
            cursor:pointer;
            margin-left:8px;
        }
        a:hover{
            color:red;
        }
    </style>
</head>
<body>
<main>
    <div>
        <p> <input type="checkbox" id="all"/> <span>全选 </span> <a> 反选 </a> </p>
        <p> <input type="checkbox" /> 选项一 </p>
        <p> <input type="checkbox" /> 选项二 </p>
        <p> <input type="checkbox" /> 选项三 </p>
        <p> <input type="checkbox" /> 选项四 </p>
        <p> <input type="checkbox" /> 选项五 </p>
        <p> <input type="checkbox" /> 选项六 </p>
        <p> <input type="checkbox" /> 选项七 </p>
        <p> <input type="checkbox" /> 选项八 </p>
        <p> <input type="checkbox" /> 选项九 </p>
        <p> <input type="checkbox" /> 选项十 </p>
    </div>
    <p> 1、切换全选/全不选文字；2、根据选中个数更新全选框状态； </p>
</main>
<script>
    // checked是复选框/单选标签的属性，始终存在，返回值Boolean
    var inpAll = document.querySelector('#all')
    var inps = document.querySelectorAll('input')
    var oa = document.querySelector('a')
    var span = document.querySelector('span')
//    刷新页面时(不考虑点击)
// 当十个选项都被选中的时候，全选按钮也被选中，内容发生变化
    function checkAll(){
//        console.log( inpAll.checked )
        for(var i = 1, num = 0; i < inps.length; i++){
            if( inps[i].checked ){
                num++
            }
//           inps[i].checked && num++
        }
//        console.log(num)
//        console.log( inps.length - 1 == num )
        inpAll.checked = ( inps.length - 1 == num )
        span.innerHTML =  inpAll.checked ? '全不选' : '全选'
    }
    checkAll()
//    第二步：当全选按钮被选中的时候，十个选项全部选中，全选内容改变
//    反之亦然
    inpAll.onclick = function(){
//        console.log( inpAll.checked )
        for(var i = 1; i < inps.length; i++){
            inps[i].checked = inpAll.checked
        }
//        span.innerHTML =  inpAll.checked ? '全不选' : '全选'
        checkAll()
    }
//    第三步，循环取反值，
    oa.onclick = function(){
        for( var i = 1; i < inps.length; i++ ){
//            !：逻辑非，
            inps[i].checked = !inps[i].checked
        }
        checkAll()
    }
//    第四步：开启实时监测功能
    for(var i = 1; i < inps.length; i++){
        inps[i].onclick = function(){
            checkAll()
        }
    }
</script>
</body>
</html>